import React, { Component } from 'react'
import { Upload, Icon, message,Row,Col} from 'antd'
import './index.less'
import Http from '../../../../axios'
import $ from 'jquery'

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  // const isJPG = file.type === 'image/png';
  // if (!isJPG) {
  //   message.error('You can only upload JPG file!');
  // }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  //return isJPG && isLt2M;
  return isLt2M;
}
export default class Picture extends Component {
  state = {
    loading: false,
    iconAddr:null,
  };
   handleChange(event){
     console.log($(".ant-upload > input")[0])
    let file = $(".ant-upload > input")[0].files[0];
    let param = new FormData(); // 创建form对象
    param.append('file', file); // 通过append向form对象添加数据
    param.append('issueId', this.issueId + '');
    param.append('xToken', this.xToken);
    Http.request({
      url: '/user/update_avatar',
      method: 'POST',
      data: param,
      enctype:"multipart/form-data",
    }).then((resData) => {
      console.log(resData)
    })
  }
  componentWillMount(){
    //this.queryPersonInfor()
  }
  fileEvt(event){
    var target=this
    let file = event.target.files[0];
    let fileName = event.target.files[0].name;
    let param = new FormData(); // 创建form对象
    param.append('file', file); // 通过append向form对象添加数据
    param.append('issueId', this.issueId + '');
    param.append('xToken', this.xToken);
    Http.request({
      url: '/user/update_avatar',
      method: 'POST',
      data: param
    }).then((resData) => {
      if(resData.code=="40000"){
        message.info(resData.message);
        target.queryPersonInfor()
      }
    })
  }
  queryPersonInfor=()=>{
    //let target = this;
    Http.request({
      url: '/user/query',
      method: 'get',
      // data: {
      //   username: values.userName,
      //   value: values.password
      // }
    }).then((resData) => {
          this.setState({
            
            iconAddr:resData.data.iconAddr,
            
          })
          
      
      
    })
  }
  change(file) {
    let imgSucFlg = true;
    var pic = $(file).parent().find(".preview");
    //添加按钮
    var addImg = $(file).parent().find(".addImg");
    //删除按钮
    var deleteImg = $(file).parent().find(".delete");
    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
    var size = $(".upload_input")[0].files[0].size;
    // gif在IE浏览器暂时无法显示
    if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
      if (ext != '') {
        // alert("图片的格式必须为png或者jpg或者jpeg格式！");
        // $(".pop-rules").text("请上传JPG、PNG、JPEG格式的图片").show();
        // popHide();
        message.info('请上传JPG、PNG、JPEG格式的图片！');
        return;
      }
    } else if(size > 5 * 1024 * 1024){
      // $(".pop-rules").text("不能上传大于5M的图片").show();
      // popHide();
      message.info('不能上传大于5M的图片！');
      imgSucFlg = false;
    } else{
      
      var formData = new FormData(document.getElementById("form"));
      Http.request({
        url: '/user/update_avatar',
        method: 'post',
        data: formData,
      }).then((resData) => {
       
        console.log(resData)
      })
      
    }  
  }
  clickImg(obj){
    $(obj).parent().find('.upload_input').click();
  }
  componentWillMount() {
    if (!window.localStorage.getItem('userInfo')) {
      this.props.history.push('/login');
    }
  }
  
  

  render() {
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    const imageUrl = this.state.imageUrl;
    return (
      <div>
      {/* <Upload
        name="avatar"
        id='issueUpload'
        type="file"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="http://localhost:3000/api/user/update_avatar"
        beforeUpload={beforeUpload}
        onChange={this.handleChange.bind(this)}
      >
        {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
      </Upload> */}
            <Row className="iconAddr">
              <Col span={11}></Col>
              <Col span={2}><img src={this.state.iconAddr}/></Col>
              <Col span={11}></Col>
            </Row>
            <form method="post"
              enctype="multipart/form-data"
              className="avatar-uploader"
              //class="hidden"
              >
              <a class="file">上传头像
              <input id="issueUpload"
              accept="*/*"
              type="file" onChange={this.fileEvt.bind(this)}/></a>
            </form>
           
    
      </div>
    )
  }
}

